<template>
    <div class="r-container">
        <!-- 功能描述 -->
        <div class="hand">
            <div class="hand-title">
                <h2>
                    <icon name="user"></icon>
                    企业注册用户
                </h2>
            </div>
            <div class="breadcrumb">
                <i class="moe-icon moe-icon-map-marker"></i>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{path: '/'}">我的控制台</el-breadcrumb-item>
                    <el-breadcrumb-item>企业管理</el-breadcrumb-item>
                    <el-breadcrumb-item>注册用户</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
        <!-- 内容 -->
        <div class="container">
            <div class="block block-rounded">
                <div class="block-content">
                    <!-- 选项 -->
                    <div class="block-option">
                        <el-row>
                            <el-col :span="8">
                                <el-input v-model="search.keyword"
                                          size="medium"
                                          class="input-with-select"
                                          placeholder="用户名/手机号码/邮箱/公司名称"
                                          clearable
                                          :disabled="operate.searchLoading"
                                          @keyup.enter.native="handleSearch">
                                    <el-select v-model="search.keyword_type"
                                               slot="prepend"
                                               placeholder="不限"
                                               style="width: 105px;">
                                        <el-option label="不限" value=""></el-option>
                                        <el-option label="用户名" value="username"></el-option>
                                        <el-option label="手机号" value="mobile"></el-option>
                                        <el-option label="邮箱" value="email"></el-option>
                                        <el-option label="公司名称" value="company_name"></el-option>
                                    </el-select>
                                    <el-button slot="append"
                                               icon="el-icon-search"
                                               :loading="operate.searchLoading"
                                               @click="handleSearch">搜索
                                    </el-button>
                                </el-input>
                            </el-col>
                            <el-col :span="16" class="text-right">
                                <el-button-group>
                                    <el-button type="primary"
                                               size="medium"
                                               icon="el-icon-refresh"
                                               :loading="operate.loading"
                                               @click="handleReload">重新载入
                                    </el-button>
                                    <el-button type="primary"
                                               icon="el-icon-plus"
                                               size="medium">创建
                                    </el-button>
                                </el-button-group>
                            </el-col>
                        </el-row>
                        <div class="r-flex mt-10">
                            <div class="r-flex__item">
                                <!-- 类型 -->
                                <el-select v-model="params.date_type"
                                           placeholder="类型"
                                           size="medium"
                                           clearable
                                           class="mr-10"
                                           style="width: 80px;">
                                    <el-option v-for="item in pickerDate.typeOptions"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value"></el-option>
                                </el-select>
                                <!-- 日期类型 -->
                                <el-select v-model="params.date_type_value"
                                           size="medium"
                                           placeholder="日期"
                                           clearable
                                           class="mr-10"
                                           style="width: 80px;"
                                           :disabled="isEmpty(params.date_type)">
                                    <el-option v-for="item in pickerDate.dateTypeOptions"
                                               :key="item.value"
                                               :label="item.label"
                                               :value="item.value">
                                    </el-option>
                                </el-select>
                                <!-- 日期 -->
                                <el-date-picker range-separator="-"
                                                start-placeholder="开始日期"
                                                end-placeholder="结束日期"
                                                size="medium"
                                                class="mr-10"
                                                style="width: 300px;"
                                                clearable
                                                v-model="params.date_value"
                                                :type="params.date_type_value || 'daterange'"
                                                :picker-options="pickerDate.dateOptions"
                                                :disabled="isEmpty(params.date_type) || isEmpty(params.date_type_value)">
                                </el-date-picker>
                                <!-- 会员级别 -->
                                <el-select v-model="params.vip_level"
                                           placeholder="会员级别"
                                           size="medium"
                                           clearable
                                           multiple
                                           collapse-tags
                                           class="mr-10"
                                           style="width: 170px;"
                                           @change="handleQuery">
                                    <el-option label="普通会员" :value="0"></el-option>
                                    <el-option label="认证会员" :value="1"></el-option>
                                    <el-option label="推荐会员" :value="2"></el-option>
                                    <el-option label="品牌会员" :value="3"></el-option>
                                </el-select>
                                <!-- 基本信息 -->
                                <el-select v-model="params.basic"
                                           placeholder="基本信息"
                                           size="medium"
                                           clearable
                                           class="mr-10"
                                           style="width: 110px;"
                                           @change="handleQuery">
                                    <el-option label="未完善" :value="0"></el-option>
                                    <el-option label="已完善" :value="1"></el-option>
                                </el-select>
                                <!-- 绑定状态 -->
                                <el-select v-model="params.bind"
                                           placeholder="绑定状态"
                                           size="medium"
                                           clearable
                                           class="mr-10"
                                           style="width: 110px;"
                                           @change="handleQuery">
                                    <el-option label="手机绑定" value="mobile"></el-option>
                                    <el-option label="邮箱绑定" value="email"></el-option>
                                    <el-option label="QQ 绑定" value="qq"></el-option>
                                    <el-option label="微信" value="wechat"></el-option>
                                    <el-option label="微信公众号" value="wechat_mp"></el-option>
                                    <el-option label="微信小程序" value="wechat_mini_program"></el-option>
                                    <el-option label="APP 招聘端" value="app"></el-option>
                                </el-select>
                                <!-- 锁定状态 -->
                                <el-select v-model="params.lock"
                                           placeholder="锁定状态"
                                           size="medium"
                                           clearable
                                           class="mr-10"
                                           style="width: 110px;"
                                           @change="handleQuery">
                                    <el-option label="未锁定" :value="0"></el-option>
                                    <el-option label="已锁定" :value="1"></el-option>
                                </el-select>
                                <!-- 注册源 -->
                                <el-select v-model="params.register_source"
                                           placeholder="注册源"
                                           size="medium"
                                           clearable
                                           class="mr-10"
                                           style="width: 110px;"
                                           @change="handleQuery">
                                    <el-option label="PC 端" :value="0"></el-option>
                                    <el-option label="H5 端" :value="1"></el-option>
                                    <el-option label="APP 招聘端" :value="2"></el-option>
                                    <el-option label="微信小程序端" :value="3"></el-option>
                                </el-select>
                            </div>
                            <div>
                                <strong class="font-s16 text-bold">结果：{{ total || 0 }}</strong>
                            </div>
                        </div>
                    </div>
                    <!-- 列表 -->
                    <el-table ref="dataList"
                              row-key="id"
                              size="medium"
                              highlight-current-row
                              :stripe="true"
                              :data="companyUsers"
                              :empty-text="table.emptyText"
                              v-loading="table.loading"
                              :element-loading-text="table.loadText"
                              :element-loading-background="table.backgroundColor">

                        <el-table-column label="UID" fixed="left" prop="uid" width="70">
                            <template slot-scope="item">
                                <strong class="text-black">{{ item.row.uid }}</strong>
                            </template>
                        </el-table-column>
                        <el-table-column label="用户名" prop="username" width="120" :show-overflow-tooltip="true">
                            <template slot-scope="item">
                                <div class="text-hide"
                                     :class="{'text-info-light': !item.row.username}">
                                    {{item.row.username || '无' }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="公司名称" prop="company_name" width="160" :show-overflow-tooltip="true">
                            <template slot-scope="item">
                                <div class="text-hide" :class="{'text-info-light': !item.row.company_name}">
                                    {{ item.row.company_name || '无' }}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="联系人" prop="contacts" width="80">
                            <template slot-scope="item">
                                <span :class="{'text-info-light': !item.row.contacts}">{{ item.row.contacts || '无' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="手机号码" prop="mobile" width="120">
                            <template slot-scope="item">
                                <span :class="{'text-info-light': !item.row.mobile}">{{ item.row.mobile || '无' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="头像" width="60" align="center">
                            <template slot-scope="item">
<!--                                <el-avatar icon="el-icon-user-solid"-->
<!--                                           class="user-avatar"-->
<!--                                           :size="32"-->
<!--                                           :src="item.row.avatar ? item.row.avatar_url : ''"></el-avatar>-->
                                <el-image class="image-avatar image-avatar--32"
                                          fit="cover"
                                          :src="item.row.avatar ? item.row.avatar_url : ''"
                                          :preview-src-list="[item.row.avatar_url]">
                                    <div slot="error">
                                        <icon name="pic"></icon>
                                    </div>
                                </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column label="邮箱" prop="email" width="180">
                            <template slot-scope="item">
                                <span class="text-lowercase"
                                      :class="{'text-info-light': !item.row.email}">{{ item.row.email || '无' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="基本信息" prop="email" width="80" align="center">
                            <template slot-scope="item">
                                <el-tag size="mini"
                                        effect="dark"
                                        class="is-round"
                                        :type="item.row.company_basic ? 'success' : 'black'">
                                    {{ item.row.company_basic ? '是' : '否' }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="注册时间" prop="created_at" width="160"></el-table-column>
                        <el-table-column label="最后登录时间" width="160">
                            <template slot-scope="item">
                                <span :class="{'text-info-light': !item.row.last_login_time}">{{
                                        item.row.last_login_time || '无'
                                    }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="绑定">
                            <template slot-scope="item">
                                <div class="binding">
                                    <!-- 已绑定手机号码 -->
                                    <el-tooltip v-show="item.row.bind.mobile"
                                                content="已绑定手机号码"
                                                placement="top">
                                        <icon name="mobile"
                                              class="account-bind account-bind--yes"></icon>
                                    </el-tooltip>
                                    <!-- 已绑定电子邮箱 -->
                                    <el-tooltip v-show="item.row.bind.email"
                                                content="已绑定电子邮箱"
                                                placement="top">
                                        <icon name="email"
                                              class="account-bind account-bind--yes"></icon>
                                    </el-tooltip>
                                    <!-- 已绑定 QQ -->
                                    <el-tooltip v-show="item.row.bind.qq"
                                                content="已绑定 QQ"
                                                placement="top">
                                        <icon name="qq"
                                              class="account-bind account-bind--yes"></icon>
                                    </el-tooltip>
                                    <!-- 已绑定 Wechat -->
                                    <el-tooltip v-show="item.row.bind.wechat"
                                                content="已绑定微信"
                                                placement="top">
                                        <icon name="wechat"
                                              class="account-bind account-bind--yes"></icon>
                                    </el-tooltip>
                                    <!-- 使用小程序 -->
                                    <el-tooltip v-show="item.row.bind.wechat_program_bind"
                                                content="已使用小程序"
                                                placement="top">
                                        <icon name="mini-program"
                                              class="account-bind account-bind--yes"></icon>
                                    </el-tooltip>
                                    <!-- 使用 APP -->
                                    <el-tooltip v-show="item.row.bind.app"
                                                content="已使用 APP"
                                                placement="top">
                                        <icon name="app"
                                              class="account-bind account-bind--yes"></icon>
                                    </el-tooltip>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="招聘" width="60" align="center" fixed="right">
                            <template slot-scope="item">
                                <el-button size="mini--small"
                                           class="font-s14 text-bold"
                                           round
                                           :type="item.row.count.job === 0 ? 'info' : 'primary'"
                                           :disabled="item.row.count.job === 0">{{ item.row.count.job }}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column label="会员" width="90" align="center" fixed="right">
                            <template slot="header">
                                会员
                                <el-popover placement="top" trigger="hover" content="红点：表示会员已到期">
                                    <icon slot="reference" name="ask-fill" class="text-info-light"></icon>
                                </el-popover>
                            </template>
                            <template slot-scope="item">
                                <el-badge :is-dot="item.row.vip.level > 0 && !item.row.is_vip">
                                    <el-tag size="small"
                                            :type="item.row.vip.level === 0 ? 'info' : `v${item.row.vip.level}`">
                                        {{ item.row.vip.name }}
                                    </el-tag>
                                </el-badge>
                            </template>
<!--                            <template slot-scope="item">-->
<!--                                <el-tag size="small"-->
<!--                                        class="is-round"-->
<!--                                        :type="item.row.vip.level === 0 ? 'info' : `v${item.row.vip.level}`">-->
<!--                                    {{ item.row.vip.name }}-->
<!--                                </el-tag>-->
<!--                            </template>-->
                        </el-table-column>
                        <el-table-column label="合同" width="60" align="center" fixed="right">
                            <template slot-scope="item">
                                <el-button size="mini--small"
                                           class="font-s14 text-bold"
                                           round
                                           :type="item.row.count.contract === 0 ? 'info' : 'success'"
                                           :disabled="item.row.count.contract === 0">
                                    {{ item.row.count.contract }}
                                </el-button>
                            </template>
                        </el-table-column>
                        <el-table-column label="锁定" width="70" align="center" fixed="right">
                            <template slot-scope="item">
                                <el-tag size="small"
                                        class="is-round"
                                        :type="item.row.is_lock === 0 ? 'success' : 'danger'">
                                    {{ item.row.is_lock_label }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="155" fixed="right">
                            <template slot="header">
                                操作
                                <el-popover placement="left" trigger="hover">
                                    <div>
                                        <div><el-tag size="mini"><icon name="edit"></icon></el-tag> 编辑注册用户</div>
                                        <div class="mt-5"><el-tag size="mini"><icon name="lock1"></icon></el-tag> 锁定用户</div>
                                        <div class="mt-5"><el-tag size="mini"><icon name="unlock"></icon></el-tag> 解锁用户</div>
                                        <div class="mt-5"><el-tag size="mini"><icon name="company-basic"></icon></el-tag> 查看企业资料</div>
                                    </div>
                                    <icon slot="reference" name="ask-fill" class="text-info-light"></icon>
                                </el-popover>
                            </template>
                            <template slot-scope="item">
                                <div class="r-flex">
                                    <div class="r-flex__item">
                                        <el-button-group class="r-button-group">
                                            <el-button size="medium"
                                                       @click="dialogCompanyUserShow(item.row.uid, item.$index)">
                                                <icon name="edit"></icon>
                                            </el-button>
                                            <el-button size="medium"
                                                       @click="handleLock(item)">
                                                <icon :name="item.row.is_lock === 0 ? 'lock1' : 'unlock'"
                                                      :class="{'text-danger': item.row.is_lock === 1}"></icon>
                                            </el-button>
                                        </el-button-group>
                                    </div>
                                    <el-button-group class="r-button-group">
                                        <el-button size="medium"
                                                   :disabled="isEmpty(item.row.company_basic)"
                                                   @click="dialogCompanyBasicShow(item.row.company_basic.id)">
                                            <icon name="company-basic"></icon>
                                        </el-button>
                                        <el-button size="medium"
                                                   @click="dialogCompanyJobUser(item.row.uid)">
                                            <icon name="post"></icon>
                                        </el-button>
                                    </el-button-group>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 页码 -->
                    <div class="block-pagination text-center">
                        <el-pagination :total="total"
                                       :page-sizes="pagination.pageSizes"
                                       :page-size.sync="pagination.perPage"
                                       :current-page.sync="pagination.currentPage"
                                       @size-change="handlePageQuery"
                                       @current-change="handlePageQuery"
                                       background
                                       layout="sizes, prev, pager, next, jumper"></el-pagination>
                    </div>
                </div>
            </div>
        </div>
        <!-- from dialog -->
        <component :is="dialogBox.component" :dialog="dialogBox" @close="closeDialogBox"></component>
    </div>
</template>

<script lang="ts">
import Component, { mixins } from 'vue-class-component'
import { namespace } from 'vuex-class'

import AuthBoxMixin from '@/mixins/cms/auth'
import baseMixin from '@/mixins/base'
import FunctionMixin from '@/mixins/function'
import PickerDateMixin from '@/mixins/picker-date'
import CompanyMixin from '@/mixins/company'

import { errorMessage, successMessage } from '@/utils'

const module = namespace('cms/companyUser')

import CompanyUserShow from '@/views/cms/company/company-user/Show.vue'
import CompanyBasicShow from '@/views/cms/company/company-basic/Show.vue'
import CompanyJobUser from '@/views/cms/company/company-job/CompanyJobUser.vue'

@Component({
  components: {
    CompanyUserShow,
    CompanyBasicShow,
    CompanyJobUser
  }
})
export default class Index extends mixins(AuthBoxMixin, baseMixin, FunctionMixin, PickerDateMixin, CompanyMixin) {
  // Vuex
  @module.State companyUsers!: Array<any>
  @module.State total!: number
  @module.Action index!: (payload: any) => Promise<any>
  @module.Action query!: (payload: any) => Promise<any>
  @module.Action show!: (payload: any) => Promise<any>
  @module.Action lock!: (payLoad: any) => Promise<any>

  // 操作组
  private operate: any = {
    loading: false,
    searchLoading: false
  }

  /*----- 钩子 -----*/
  public created() {
    if (!this.companyUsers.length) {
      this.getIndex()
    }
  }

  /**
   * 获取首页
   *
   * @return {Promise<any>}
   */
  private getIndex(): Promise<any> {
    this.table.loading = true
    return this.index({}).then((res) => {
      this.table.loading = false

      if (res.data.total === 0) {
        this.table.emptyText = '暂无数据'
      }

      return res
    }).catch((err) => {
      this.table.loading = false
      return err
    })
  }

  /**
   * 获取查询
   *
   * @param {object} params
   * @return Promise<any>
   */
  private getQuery(params: any): Promise<any> {
    this.table.loading = true
    return this.query({params}).then((res) => {
      this.table.loading = false
      return res
    }).catch((err) => {
      this.table.loading = false
      return err
    })
  }

  /**
   * 处理搜索
   *
   * @return {void}
   */
  private handleSearch(): void {
    this.operate.searchLoading = true
    const params = {
      ...this.search,
      per_page: this.pagination.perPage,
      page: 1
    }
    this.getQuery(params).then(() => {
      this.operate.searchLoading = false
    }).catch(() => {
      this.operate.searchLoading = false
    })
  }

  /**
   * 重新载入
   *
   * @return {void}
   */
  private handleReload(): void {
    this.params = {}
    this.search = {}
    this.initPagination()
    this.operate.loading = true
    this.getIndex().then((res) => {
      this.operate.loading = false
    }).catch((err) => {
      this.operate.loading = false
    })
  }

  /**
   * 处理查询
   *
   * @return {Promise<any>}
   */
  private handleQuery(): Promise<any> {
    this.table.loading = true
    const params = {
      ...this.search,
      ...this.params,
      per_page: this.pagination.perPage,
      page: 1
    }
    return this.getQuery(params).then((res) => {
      this.table.loading = false
      if (res.status === 200) {
        this.pagination.currentPage = res.data.current_page
      }
    }).catch(() => {
      this.table.loading = false
    })
  }

  /**
   * 处理锁定
   *
   * @param {Object} item
   * @private
   */
  private handleLock(item: any): void {
    this.$confirm(item.row.is_lock === 0 ? '您确定锁定该账号吗？' : '您确定解锁该账号吗？', '操作提示', {
      type: 'warning'
    }).then(() => {
      this.table.loading = true
      this.lock({
        id: item.row.uid,
        index: item.$index,
        params: { is_lock: item.row.is_lock }
      }).then((res) => {
        res.status === 200 ? successMessage(res.message) : errorMessage(res.message)
        this.table.loading = false
      }).catch((err) => {
        this.table.loading = false
      })
    })
  }

  /**
   * 处理分页
   *
   * @return {void}
   */
  private handlePageQuery(): void {
    this.table.loading = true
    const params = {
      ...this.params,
      per_page: this.pagination.perPage,
      page: this.pagination.currentPage
    }

    this.getQuery(params)
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/view/image';
@import '~@/styles/element/element-variables.scss';

.user-avatar {
    //width: 32px;
    //height: 32px;
    //line-height: 32px;
    box-shadow: 0 0 5px rgba(#000, .1);
}

::v-deep .tooltip-bind {
    background: $--color-primary;
}

// 绑定
.binding {
    //width: 170px;
    //white-space: nowrap;

    .account-bind {
        margin-right: 3px;
        width: 24px;
        height: 24px;
        color: #999;
        font-size: 14px;
        line-height: 24px;
        text-align: center;
        background-color: #ddd;
        border-radius: 13px;
        cursor: pointer;

        &:hover {
            opacity: .8;
        }

        &:last-child {
            margin-right: 0;
        }

        &--yes {
            color: #fff;
            background: $--color-success;
        }

        &--qq {
            color: #fff;
            background: #4272f7;
        }

        &--wechat, &--mini--program {
            color: #fff;
            background: #00ad4a;
        }

        &--app {
            color: #fff;
            background: $--color-primary;
        }
    }
}
</style>